<template>
	<div class="w-h-100">
		<el-dialog v-model="isShowDialog" :fullscreen="Fullscreen" :width="FormWidth" draggable :close-on-click-modal="false" :destroy-on-close="true" :before-close="handleClose">
			<template #header>
				<div style="color: #fff" class="header">
					<div>
						<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle">
							<ele-Edit />
						</el-icon>
						<span> {{ title }} </span>
					</div>
					<el-icon size="14" style="margin-right: 30px; padding-top: 2px; display: inline; vertical-align: middle; width: 40px; text-align: right" class="fullIcon" @click="fullAction">
						<ele-FullScreen />
					</el-icon>
				</div>
			</template>
			<template #footer>
				<div style="color: #fff" :class="{ hidden: hideFooter }">
					<el-button @click="isShowDialog = false">{{ $t('eg9MxkLqtdZzYrXmq936v') }}</el-button>
					<el-button type="primary" @click="submitHandle(formRef)">{{ $t('o1SPkDfvCdgvoQhrmIf9q') }}</el-button>
				</div>
			</template>
			<el-form :model="formData" ref="formRef" :size="size" :label-width="labelWidth + 'px'" :label-position="labelPosition">
				<el-row :gutter="35">
					<template v-for="(item, index) in formList" :key="index">
						<template v-if="item.type == 'divider'">
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<div style="padding: 10px 0">
									<el-divider
										:content-position="item?.dividerOption?.contentPosition || 'left'"
										:direction="item?.dividerOption?.direction || 'horizontal'"
										:border-style="item?.dividerOption?.borderStyle"
									>
										<span :style="{ color: item.dividerOption?.titleColor || '#999', fontSize: item.dividerOption?.titleSize || '16px' }">
											{{ item.dividerOption?.title || '' }}
										</span>
									</el-divider>
								</div>
							</el-col>
						</template>
						<template v-else>
							<el-col
								:xs="item?.size?.xs || 12"
								:sm="item?.size?.sm || 12"
								:md="item?.size?.md || 12"
								:lg="item?.size?.md || 12"
								:xl="item?.size?.xl || 12"
								:class="{ mb20: size == 'default', mb12: size == 'small', mb30: size == 'large' }"
								v-if="item?.show == undefined ? true : item.show"
							>
								<template v-if="item.type == 'slot'">
									<slot :name="item?.slotName" :data="{ formData, item }"></slot>
								</template>
								<template v-else>
									<!-- :label="item.label" -->
									<el-form-item
										:label="item.lang ? $t(item.lang) : item.label"
										:prop="item.key"
										:rules="item.rules"
										:labelWidth="Local.get('themeConfig').globalI18n == 'en' ? '200' : item.labelWidth"
										:class="{ disableBack: item?.disabledStyle, disableText: item?.disabledStyle, disableTextarea: item?.disabledStyle }"
									>
										<template v-if="item.type == 'input'">
											<template v-if="item.hasOwnProperty('bind')">
												<template v-if="item.bind">
													<el-input v-model="formData[item.key]" :placeholder="item.placeHolder" :disabled="item?.disabled || item?.disabledStyle || false" />
												</template>
												<template v-else>
													<el-input :model-value="formData[item.key]" :placeholder="item.placeHolder" :disabled="item?.disabled || item?.disabledStyle || false" />
												</template>
											</template>
											<template v-else>
												<el-input v-model="formData[item.key]" :placeholder="item.placeHolder" :disabled="item?.disabled || item?.disabledStyle || false" />
											</template>
										</template>
										<template v-if="item.type == 'textarea'">
											<el-input v-model="formData[item.key]" :placeholder="item.placeHolder" type="textarea" :disabled="item?.disabled || item?.disabledStyle || false" />
										</template>
										<template v-if="item.type == 'number'">
											<el-input v-model.number="formData[item.key]" :placeholder="item.placeHolder" :disabled="item?.disabled || item?.disabledStyle || false" />
										</template>
										<template v-if="item.type == 'select'">
											<template v-if="item?.selectOption?.type">
												<el-select
													v-model="formData[item.key]"
													:multiple="item?.selectOption?.multiple || false"
													:collapse-tags="item?.selectOption?.collapseTags || false"
													:collapse-tags-tooltip="item?.selectOption?.collapseTags || false"
													filterable
													remote
													reserve-keyword
													:remote-show-suffix="true"
													:placeholder="item.placeHolder"
													:remote-method="(params: any) => { selectRemoteMethod(params, item) }"
													:loading="item?.selectOption.loading"
													@change="(params: any) => selectChangeHandle(params, item)"
													@focus="(params: any) => selectRemoteMethod(null, item)"
													style="width: 100%"
													:disabled="item?.disabled || item?.disabledStyle || false"
												>
													<el-option :label="op.label" :value="op.value" v-for="(op, opIndex) in item.options" :key="opIndex + op.label">
														{{ op.label }}
														<template v-if="item?.selectOption?.showMore && item?.selectOption?.showMore.length">
															<span style="font-size: 12px; color: #999; font-style: normal">
																(
																<i v-for="(moreItem, moreIndex) in item?.selectOption?.showMore" :key="moreIndex" style="font-style: normal">
																	<template v-if="op[moreItem.key]"> {{ moreItem.label }} <i v-if="moreItem.label">:</i>{{ op[moreItem.key] }} </template>
																	<template v-if="moreIndex != item?.selectOption?.showMore.length - 1"> , </template>
																</i>
																)
															</span>
														</template>
													</el-option>
												</el-select>
											</template>
											<template v-else>
												<el-select v-model="formData[item.key]" :placeholder="item.placeHolder" style="width: 100%">
													<el-option :label="op.label" :value="op.value" v-for="(op, opIndex) in item.options" :key="opIndex + op.label" :disabled="item?.disabled || item?.disabledStyle || false" />
												</el-select>
											</template>
										</template>
										<template v-if="item.type == 'radio'">
											<el-radio-group v-model="(formData[item.key] as string)" style="width: 100%" :disabled="item?.disabled || item?.disabledStyle || false">
												<el-radio class="disabCheck" :label="op.value" size="small" v-for="(op, opIndex) in item.options" :key="opIndex + op.value">
													{{ op.label }}
												</el-radio>
											</el-radio-group>
										</template>
										<template v-if="item.type == 'checkbox'">
											<el-checkbox-group v-model="formData[item.key]" style="width: 100%">
												<el-checkbox class="disabCheck" v-for="(op, opIndex) in item.options" :key="opIndex + op.value" :label="op.value" :disabled="item?.disabled || item?.disabledStyle || false">
													{{ op.label }}
												</el-checkbox>
											</el-checkbox-group>
										</template>
										<template v-if="item.type == 'switch'">
											<el-switch v-model="formData[item.key]" />
										</template>
										<template v-if="item.type == 'date'">
											<template v-if="item?.dateOption?.type && (item.dateOption.type === 'monthrange' || item.dateOption.type === 'daterange')">
												<el-date-picker
													v-model="formData[item.key]"
													:type="item?.dateOption?.type || 'date'"
													:placeholder="item.placeHolder"
													:format="item?.dateOption?.format || 'YYYY-MM-DD'"
													:disabled="item?.disabled || item?.disabledStyle || false"
													:range-separator="item?.dateOption?.separator || 'To'"
													:start-placeholder="item?.dateOption?.startPlaceHodler || ''"
													:end-placeholder="item?.dateOption?.endPlaceHodler || ''"
													unlink-panels
													style="width: 100%"
												/>
											</template>
											<template v-else>
												<el-date-picker
													v-model="formData[item.key]"
													:type="item?.dateOption?.type || 'date'"
													:placeholder="item.placeHolder"
													:format="item?.dateOption?.format || 'YYYY-MM-DD'"
													style="width: 100%"
													:disabled="item?.disabled || item?.disabledStyle || false"
													:value-format="item?.dateOption?.format || 'YYYY-MM-DD'"
												/>
											</template>
										</template>
										<template v-if="item.type == 'upload'">
											<el-upload
												v-model:file-list="formData[item.key]"
												class="upload-demo"
												list-type="picture"
												:auto-upload="false"
												:on-change="(file: any, files: any) => { fileChangeHandle(file, files, item) }"
												:multiple="item?.uploadOption?.multiple || false"
												:limit="item?.uploadOption?.limit || 1"
												style="width: 100%"
											>
												<el-button type="primary" size="small">选择文件</el-button>
												<template #file="{ file: UploadFile }">
													<div style="width: 100%; position: relative">
														<a :href="UploadFile.url" class="hr-flex-start file-item" target="_blank">
															<!-- <img :src="UploadFile.url" alt="" style="width: 100px; height: 100px;"> -->
															<div class="hr-flex-start">
																<el-icon style="font-size: 16px">
																	<Document />
																</el-icon>
															</div>
															<div style="margin-left: 20px">
																{{ UploadFile.name }}
															</div>
														</a>
														<span class="close-icon" @click="deleteFileItem(formData[item.key], UploadFile)">
															<el-icon>
																<Close />
															</el-icon>
														</span>
													</div>
												</template>
											</el-upload>
										</template>
										<template v-if="item.type == 'cascader'">
											<el-cascader
												v-model="formData[item.key]"
												:placeholder="item.placeHolder"
												:options="item.options"
												filterable
												:props="item?.cascaderOption?.props || {}"
												@focus="() => item?.cascaderOption?.requestMethod && item?.cascaderOption?.requestMethod(item)"
												@visible-change="() => item?.cascaderOption?.requestMethod && item?.cascaderOption?.requestMethod(item)"
												:show-all-levels="item.cascaderOption?.hasOwnProperty('showAalLevels') ? item.cascaderOption?.showAalLevels : true"
												style="width: 100%"
											/>
										</template>
										<template v-if="item.type == 'inputNumber'">
											<el-input-number
												v-model="formData[item.key]"
												:min="item.inputNumberOption?.min"
												:max="item.inputNumberOption?.max"
												:step="item.inputNumberOption?.step"
												:controls-position="item.inputNumberOption?.controlsPosition"
												style="width: 100%"
											/>
										</template>
									</el-form-item>
								</template>
							</el-col>
						</template>
					</template>
				</el-row>
			</el-form>
			<slot></slot>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { defineComponent, ref, watch, reactive, toRefs, onMounted, PropType } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { validatePercentageNumber } from '/@/utils/validators.ts';
import { Local } from '/@/utils/storage';
import moment from 'moment';

import { storeToRefs } from 'pinia';
import pinia from '/@/stores/index';
// import { useThemeConfig } from '/@/stores/themeConfig';
// const stores = useThemeConfig(pinia);
// const { themeConfig } = storeToRefs(stores);

moment.locale('zh-cn');

type rulesType = {
	required?: boolean;
	validator?: Function;
	message?: string;
	[propsName: string]: any;
};
type formType = {
	type: string;
	label: string;
	key: string;
	value: string | number | any[] | boolean;
	slotName?: string; // 插槽
	show?: boolean; // 是否显示，默认显示
	placeHolder?: string;
	labelWidth?: string;
	disabled?: boolean;
	disabledStyle?: boolean;
	options?: any[];
	rules: rulesType[];
	dateOption?: {
		type?: string;
		format?: string; // element表单的格式化
		dataFormat?: string; // element表单的格式化 提交表单的格式化, 如果不提供则不格式化
		[propsName: string]: any;
	};
	selectOption?: {
		type: string; // 类型，是否是远程搜索，给remote就ok
		requestMethod: Function; // 搜索请求方法
		searchKey?: string; // 搜素字段
		otherParams?: any; // 其他的请求参数
		value: string; // value 用的是返回搜索返回数据中的哪个字段
		label: string; // label 用的是返回搜索返回数据中的哪个字段
		multiple?: boolean;
		collapseTags?: boolean;
		loading: boolean; // 加载
		fill?: any; // 需要填充数据的字段{提交表单的字段: 返回数据的字段}
		dependOnParams?: object; // 是否依赖表单中其他的字段进行搜素 参数形式：{表单的键名： 服务器搜索键名}
		showMore?: { key: string; label: string }[]; // option中显示更多字段的信息
	};
	dividerOption?: {
		// 分割线配置
		title?: string;
		titleColor?: string;
		titleSize?: number;
		contentPosition?: string; // 位置
		borderStyle?: object; // 设置分隔符样式
		direction?: string; // 设置分割线方向
	};
	cascaderOption?: {
		// 级联选择器的配置项
		requestMethod?: Function; // 级联选择器的数据请求方法
		props?: any;
		showAalLevels?: boolean;
	};
	uploadOption?: {
		multiple?: boolean; // 是否多选
		limit?: number; // 文件限制
	};
	size?: {
		xs?: number;
		sm?: number;
		md?: number;
		lg?: number;
		xl?: number;
	};
	watch?: boolean; // 是否监听该字段
	bind?: boolean; // 是否双向 绑定
	inputNumberOption?: {
		min?: number;
		max?: number;
		step?: number;
		controlsPosition?: string;
	};
	lang?: string;
};
interface formDataType {
	[propsName: string]: any;
}
export default defineComponent({
	components: {},
	props: {
		labelPosition: {
			// label 对齐方式
			type: String,
			default: 'right',
		},
		size: {
			//form 尺寸,跟随字号进行变化
			type: String,
			default: Local.get('themeConfig').globalComponentSize == 'small' ? 'small' : Local.get('themeConfig').globalComponentSize == 'large' ? 'large' : 'default',
		},
		labelWidth: {
			// 尺寸
			type: Number,
			default: 100,
		},
		formWidth: {
			//form宽度
			type: String,
			default: Local.get('themeConfig').globalI18n == 'en' ? '65%' : '50%',
		},
		fullscreen: {
			//全屏属性
			type: Boolean,
			default: false,
		},
		hideFooter: {
			//显示footer
			type: Boolean,
			default: false,
		},
		beforeHandler: {
			//在提交之前先调用的方法
			type: Function as PropType<any>,
			default: null,
		},
	},
	setup(props, ctx) {
		//根据浏览器宽度来展示form宽度
		let FormWidth = ref(props.formWidth);
		let Fullscreen = ref(props.fullscreen);
		const fullAction = () => {
			Fullscreen.value = !Fullscreen.value;
		};
		const handleClose = (done: () => void) => {
			Fullscreen.value = props.fullscreen;
			done();
		};
		onMounted(() => {
			window.onresize = () => {
				return setDialogWidth();
			};
		});
		setDialogWidth();
		//如果formWidth>=50%且FormWidth<=769 强制为769px宽度
		function setDialogWidth() {
			var val = document.body.clientWidth;
			const rate = Number(props.formWidth.replace('%', '')) / 100;
			if (rate >= 0.5 && val * rate <= 769) {
				FormWidth.value = '769px';
			} else {
				FormWidth.value = props.formWidth;
			}
		}

		// 深拷贝
		const deepCopy = (data: any) => {
			let res: any = typeof data.splice === 'function' ? [] : {};
			if (typeof data === 'object') {
				for (let key in data) {
					if (data[key] && typeof data[key] === 'object') {
						res[key] = deepCopy(data[key]);
					} else {
						res[key] = data[key];
					}
				}
			}
			return res;
		};

		const state = reactive({
			formList: [] as formType[],
			formData: {} as formDataType,
			isShowDialog: false,
			title: '',
		});

		// 创建表单验证
		let rulesObj: FormRules = {};
		// 表单所有属性
		let allFormData: formDataType = {};

		const formRef = ref();

		// 打开弹窗
		const openDialog = (formList: formType[], title: string = '') => {
			state.formList = deepCopy(formList);
			formList.forEach((item: formType) => {
				if (item.key) {
					allFormData[item.key] = item.value;
				}
			});
			state.formData = allFormData;
			state.isShowDialog = true;
			state.title = title;
		};

		// 删除文件
		const deleteFileItem = (formItem: any, file: any) => {
			// console.log(formItem.value)
			// return
			// console.log(formItem)
			// console.log(file)
			let name: any = file.name;
			let fileList: any[] = formItem;
			// console.log(formItem.value)
			// console.log(formItem)
			// return;
			if (fileList.length) {
				for (let i = 0; i < fileList.length; i++) {
					if (name == fileList[i].name) {
						// console.log(8);
						fileList.splice(i, 1);
						break;
					}
				}
				// console.log(formItem.value)
			}
		};

		// 上传文件变化时
		const fileChangeHandle = (file: any, files: any[], formItem: any) => {
			formItem.value = files;
		};

		// 将文件的blob转成 base64
		const getBase64 = (file: any, name: string): Promise<any> => {
			if (file == '') return Promise.resolve('');
			return new Promise((resolve, reject) => {
				// 判断是否是blob类型
				if (file instanceof Blob) {
					let reader = new FileReader();
					let fileResult: any = '';
					// console.log(file);
					reader.readAsDataURL(file);
					//开始转
					reader.onload = function () {
						fileResult = reader.result;
					};
					//转 失败
					reader.onerror = function (error) {
						reject(error);
					};
					//转 结束  咱就 resolve 出去
					reader.onloadend = function () {
						resolve({ data: fileResult, name: name });
					};
				} else {
					// 吧http截掉
					let newFile = file.replace(window.$host, '');
					resolve({ data: newFile, name: name });
				}
			});
		};

		// 提交表单
		const submitHandle = async (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			formEl.validate(async (valid) => {
				if (valid) {
					try {
						// 判断表单中是否有文件上传选项
						for (let i = 0; i < state.formList.length; i++) {
							let res = await dealBase64(state.formList[i]);
						}
						// 判断是否有date类型, 如果有则格式化
						state.formList.forEach((item) => {
							if (item.type === 'date') {
								let format = item?.dateOption?.dataFormat; // 格式化类型， 不提供返回原样数据
								if (!format) return;
								if (Array.isArray(state.formData[item.key])) {
									// console.log(state.formData[item.key].length);
									if (state.formData[item.key].length) {
										state.formData[item.key] = state.formData[item.key].map((v: any) => {
											return (v && moment(v).format(format)) || '';
										});
									}
								} else {
									state.formData[item.key] = (state.formData[item.key] && moment(state.formData[item.key]).format(format)) || '';
								}
							}
						});
						// 提交之前先执行提交前要执行的方法
						if (props.beforeHandler != null) {
							let res = await props.beforeHandler(JSON.parse(JSON.stringify(state.formData)));
							if (!res) return;
						}
						ctx.emit('submit', JSON.parse(JSON.stringify(state.formData)));
						state.isShowDialog = false;
					} catch (err) {
						console.log(err);
					} finally {
					}
				} else {
					// console.log(state.formData);
					// console.log('error submit!');
					return false;
				}
			});
		};

		//  select 远程搜索
		const selectRemoteMethod = async (query: any, item: any) => {
			item.selectOption.loading = true;
			let selectOp: any = item.selectOption;
			let params: any = {};
			if (selectOp.searchKey && query) {
				params[selectOp.searchKey] = query;
			}
			if (selectOp.otherParams) {
				params = { ...params, ...selectOp.otherParams };
			}
			// 如果有依赖其他表单字段进行搜素的
			if (selectOp.dependOnParams) {
				let depParams: any = {};
				for (let key in selectOp.dependOnParams) {
					let searchKey: any = selectOp.dependOnParams[key];
					let searchVal: any = state.formData[key];
					depParams[searchKey] = searchVal;
				}
				params = { ...params, ...depParams };
			}
			let remoteMethod: any = item.selectOption.requestMethod || null;
			let opArr: any[] = [];
			if (!remoteMethod) return;
			let res: { data: any } = await remoteMethod(params as object);

			//   有些返回数据是放在data字段中的
			if (res.data.length) {
				opArr = res.data.map((item: any) => {
					// 返回的数据可能只是一个字符串，不是对象
					if (typeof item === 'string') {
						return {
							value: item,
							label: item,
						};
					} else {
						let itemCopy = deepCopy(item);
						let value: any = itemCopy[selectOp.value] || '';
						let label: any = itemCopy[selectOp.label] || '';
						let op = {
							value: value,
							label: label,
						};
						let returnObj: object = {
							...itemCopy,
							...op,
						};
						return returnObj;
					}
				});
			}
			// 有些返回数据是放在rows字段中的
			if (res.data.rows && res.data.rows.length) {
				opArr = res.data.rows.map((item: any) => {
					let itemCopy = deepCopy(item);
					let value: any = itemCopy[selectOp.value] || '';
					let label: any = itemCopy[selectOp.label] || '';
					let op = {
						value: value,
						label: label,
					};
					let returnObj: object = {
						...itemCopy,
						...op,
					};
					return returnObj;
				});
			}
			item.selectOption.loading = false;
			item.options = opArr;
		};
		// select改变方法
		const selectChangeHandle = (seleted: any, item: any) => {
			let options: any[] = item.options;
			let filterItem = options.filter((item) => {
				return seleted === item.value;
			});
			let itemFill: any = item.selectOption.fill;
			if (filterItem.length && itemFill) {
				let itemObj: any = filterItem[0];
				for (let key in itemFill) {
					let fillVal: any = itemFill[key];
					let realVal = itemObj[fillVal] || '';
					state.formData[key] = realVal;
				}
			}
			//filterItem->选中的对, item当前select组件的信息
			ctx.emit('selectChange', filterItem, item);
		};
		// 处理base64
		const dealBase64 = async (item: any) => {
			if (item.type === 'upload') {
				// console.log(item.key, 'item.key');
				let fileList: any[] = state.formData[item.key];
				let newFileList: any[] = [];
				if (fileList.length > 0) {
					let promiseList: Promise<any>[] = [];
					fileList.forEach((item: any) => {
						if (!item.id) {
							// console.log(item)
							promiseList.push(getBase64(item.raw || item.url, item.name || ''));
						} else {
							newFileList.push(item);
						}
					});
					if (promiseList.length > 0) {
						let res: any[] = await Promise.all(promiseList);
						newFileList = [...newFileList, ...res];
					}
					state.formData[item.key] = newFileList;
				}
				return Promise.resolve(newFileList);
			}
		};

		let keyList: any = []; // 被监听的key

		// 监听formData
		watch(
			() => {
				// 找出需要监听的字段
				let watchList: any[] = state.formList.filter((item) => {
					return item?.watch;
				});
				keyList = [];
				let valList = watchList.map((item) => {
					keyList.push(item.key);
					return state.formData[item.key];
				});
				return valList;
			},
			(newVal, odlVal) => {
				let obj: any = {};
				let valueList: any[] = keyList.map((item: any, index: any) => {
					let newValCopy = newVal[index] ? newVal[index] : '';
					let oldValCopy = odlVal[index] ? odlVal[index] : '';
					obj[item] = {
						newVal: newValCopy,
						oldVal: oldValCopy,
						isChanged: newValCopy == oldValCopy ? false : true,
					};
					return {
						key: item,
						newVal: newVal[index],
						oldVal: odlVal[index],
					};
				});
				ctx.emit('watchCallBack', valueList, state.formData, state.formList, obj);
			},
			{ deep: true }
		);

		return {
			...toRefs(state),
			openDialog,
			formRef,
			submitHandle,
			deleteFileItem,
			fileChangeHandle,
			selectRemoteMethod,
			selectChangeHandle,
			FormWidth,
			fullAction,
			Fullscreen,
			handleClose,
			Local,
		};
	},
});
</script>
<style lang="scss" scoped>
:deep(.disabCheck .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after) {
	border-color: #fff;
}
:deep(.disabCheck .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner) {
	background-color: #0152db;
	border-color: #0152db;
}
:deep(.disabCheck .el-checkbox__input.is-disabled + span.el-checkbox__label) {
	color: var(--el-color-white);
}
:deep(.disabCheck .el-checkbox__label) {
	font-size: 12px;
}

:deep(.el-dialog__body) {
	max-height: calc(100vh - 150px) !important;
}

:deep(.disabCheck .el-radio__input.is-disabled.is-checked .el-radio__inner::after) {
	border-color: #fff;
}
:deep(.disabCheck .el-radio__input.is-disabled.is-checked .el-radio__inner) {
	background-color: #0152db;
	border-color: #0152db;
}
:deep(.disabCheck .el-radio__input.is-disabled + span.el-radio__label) {
	color: #333;
}
:deep(.disabCheck .el-radio__label) {
	font-size: 12px;
}

.header {
	display: flex;
	justify-content: space-between;
}
.fullIcon {
	cursor: pointer;
	:hover {
		color: #f46c6c;
	}
}
.close-icon {
	color: grey;
	font-size: 16px;
	position: absolute;
	top: -5px;
	right: 0;
	cursor: pointer;
	padding: 0px;
	&:hover {
		color: red;
	}
}
.file-item {
	cursor: pointer;
	&:hover {
		color: blue;
	}
}
</style>

<!-- 
            let list: any = [{
                type: 'input',
                label: '商品',
                key: 'product',
                value: '',
                placeHolder: '请输入商品',
                rules: [
                    { required: true, message: '未达标程度不能为空', trigger: 'blur' }
                ],
                size: {
                    xs: 12,
                    sm: 12,
                    md: 12,
                    lg: 12,
                    xl: 12,
                    
                },
            }, {
                type: 'input',
                label: '数量',
                key: 'number',
                value: '',
                placeHolder: '请输入数量',
                rules: [
                    { required: true, message: '未达标程度不能为空', trigger: 'blur' }
                ],
                size: {
                    xs: 12,
                    sm: 12,
                    md: 12,
                    lg: 12,
                    xl: 12,
                },
            }, {
                type: 'textarea',
                label: '备注',
                key: 'remark',
                value: '',
                placeHolder: '请输入备注',
                rules: [
                    { required: true, message: '备注不能为空', trigger: 'blur' }
                ],
                size: {
                    xs: 12,
                    sm: 12,
                    md: 12,
                    lg: 12,
                    xl: 12,
                },
            }, {
                type: 'number',
                label: '金额',
                key: 'money',
                value: '',
                placeHolder: '请输入金额',
                rules: [
                    { required: true, message: '金额不能为空', trigger: 'blur', type: 'number' }
                ],
                size: {
                    xs: 12,
                    sm: 12,
                    md: 12,
                    lg: 12,
                    xl: 12,
                },
            }, {
                type: 'select',
                label: '职业',
                key: 'job',
                value: '',
                options: [{
                    label: '工人',
                    value: 1
                }, {
                    label: '农民',
                    value: 2
                }, {
                    label: '商人',
                    value: 3
                }],
                placeHolder: '请输入职业',
                rules: [
                    { required: true, message: '请输入职业', trigger: 'change',}
                ],
                size: {
                    xs: 12,
                    sm: 12,
                    md: 12,
                    lg: 12,
                    xl: 12,
                },
            }, {
                type: 'radio',
                label: '所在城市',
                key: 'city',
                value: 1,
                options: [{
                    label: '广州',
                    value: 1
                }, {
                    label: '北京',
                    value: 2
                }, {
                    label: '上海',
                    value: 3
                }],
                rules: [
                    { required: true, message: '请输入职业', trigger: 'change',}
                ],
                size: {
                    xs: 12,
                    sm: 12,
                    md: 12,
                    lg: 12,
                    xl: 12,
                },
            }, {
                type: 'checkbox',
                label: '入选城市',
                key: 'selectCity',
                value: [1],
                options: [{
                    label: '广州',
                    value: 1
                }, {
                    label: '北京',
                    value: 2
                }, {
                    label: '上海',
                    value: 3
                }],
                rules: [
                    { required: true, message: '请输入职业', trigger: 'change',}
                ],
                size: {
                    xs: 12,
                    sm: 12,
                    md: 12,
                    lg: 12,
                    xl: 12,
                },
            },{
                type: 'date',
                label: '开始时间',
                key: 'beginDate',
                value: '',
                dateOption: {
                    type: 'daterange',
                    format: 'YYYY-MM-DD',
                    startPlaceHodler: '开始时间',
                    endPlaceHodler: '结束时间',
                    separator: '到'
                },
                placeHolder: '请输入开始时间',
                rules: [
                    { required: true, message: '请输入开始时间', trigger: 'change',}
                ],
                size: {
                    xs: 12,
                    sm: 12,
                    md: 12,
                    lg: 12,
                    xl: 12,
                },
            }, {
                type: 'upload',
                label: '文件',
                key: 'files',
                value: [],
                rules: [
                    { required: true, message: '文件不能为空', trigger: 'change',}
                ],
                size: {
                    xs: 12,
                    sm: 12,
                    md: 12,
                    lg: 12,
                    xl: 12,
                },
            }, {
                type: 'switch',
                label: '是否启用',
                key: 'forbid',
                value: true,
                rules: [
                    { required: true, message: '文件不能为空', trigger: 'change',}
                ],
                size: {
                    xs: 12,
                    sm: 12,
                    md: 12,
                    lg: 12,
                    xl: 12,
                },
            },]

 -->
